<template>
    <div>
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="(v, i) in list" :key="i">
                <van-image :src="v.image_src" />
            </van-grid-item>
        </van-grid>

        <van-row>
            <van-col span="4">
                <van-sidebar v-model="active">
                    <van-sidebar-item :title="v.cat_name" v-for="(v, i) in lil" :key="i" />
                </van-sidebar>
            </van-col>
            <van-col span="18" offset="2">
                <van-grid :border="false" :column-num="3">
                    <div v-for="(v, i) in lil[active]?.children" :key="i">
                        <div>{{ v.cat_name }}</div>
                        <van-grid-item v-for="(item, index) in items" :key="index">
                            <van-image :src="item.cat_icon" />
                        </van-grid-item>
                    </div>

                </van-grid>

            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import { catitemsApi, categoriesApi } from '@/api/api';
import { ref } from 'vue';

let list = ref([])
const getlist = () => {
    catitemsApi().then((res) => {
        console.log(res);
        list.value = res.data.message
    })
}
getlist()

const active = ref(0);
let lil = ref([])
const getlil = () => {
    categoriesApi().then((res) => {
        console.log(res);
        lil.value = res.data.message
    })
}
getlil()

let items = ref([])
const getitems = () =>{
    categoriesApi().then((res)=>{
        items.value = res.data.message.children
    })
}
getitems()
</script>

<style lang="scss" scoped></style>